<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最北邮局 - 信息展示</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }
        
        .container {
            max-width: 660px;
            /* height: 1250px; */
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
        }
        
        .image-section {
            height: 290px;
            overflow: hidden;
        }
        
        .info-section {
            height: 45%;
            background-color: white;
            border-radius: 24px 24px 0 0;
            transform: translateY(-24px);
            padding: 24px;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
        }
        
        .post-office-image {
            width: 380px;
            height: 290px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .container:hover .post-office-image {
            transform: scale(1.05);
        }
        
        .location-icon {
            color: #10b981;
            font-size: 20px;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            transition: all 0.2s ease;
        }
        
        .info-item:hover {
            transform: translateX(5px);
        }
        
        .info-icon {
            width: 32px;
            height: 32px;
            background-color: #f0fdfa;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #059669;
        }
        
        .fade-in {
            animation: fadeIn 0.8s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .title-section {
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 16px;
            margin-bottom: 20px;
        }
        
        .description {
            line-height: 1.6;
            color: #4b5563;
        }
    </style>
</head>
<body >
    <div class="container">
        <!-- 上半部分：图片展示 -->
        <div class="image-section">
            <img src="./1763442881336.jpg" alt="中国最北邮局建筑照片" class="post-office-image">
        </div>
        
        <!-- 下半部分：信息卡片 -->
        <div class="info-section fade-in">
            <!-- 标题区域 -->
            <div class="title-section">
                <h1 class="text-font-smaller font-bold mb-3 font-sans"  >最北邮局</h1>
                <div class="flex items-center text-gray-600">
                    <i class="fas fa-map-marker-alt location-icon mr-2"></i>
                    <p class="text-sm">大兴安岭地区漠河市北极镇黑龙江大街35号</p>
                </div>
            </div>
            
            <!-- 详细信息板块 -->
            <div class="mb-6">
                <h2 class="text-lg font-semibold mb-4 text-gray-800">详细信息</h2>
                
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-map-marked-alt"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">所属地</p>
                        <p class="font-medium">大兴安岭地区漠河市</p>
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-landmark"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">行政管辖</p>
                        <p class="font-medium">北极村社区</p>
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-user-shield"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">社区民警</p>
                        <p class="font-medium">张警官(13022335555)</p>
                    </div>
                </div>
            </div>
            
            <!-- 简介板块 -->
            <div>
                <h2 class="text-lg font-semibold mb-4 text-gray-800">邮局简介</h2>
                <p class="description">
                    最北邮局始建于1953年，是中国地理位置最北的邮局，建成后便投入使用，服务于当地居民和游客。作为漠河市北极镇的重要地标之一，最北邮局不仅承担着日常的邮政服务功能，还是众多游客必到的旅游打卡地。每年有大量游客专程前来，在这里寄出带有"中国最北"邮戳的明信片，以作纪念。随着北极旅游的兴起，最北邮局已成为漠河旅游的一张特色名片，吸引着越来越多的国内外游客。
                </p>
            </div>
        </div>
    </div>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 添加滚动动画效果
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('fade-in');
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            // 为信息卡片添加动画监听
            const infoSection = document.querySelector('.info-section');
            observer.observe(infoSection);
            
            // 为每个信息项添加延迟动画
            const infoItems = document.querySelectorAll('.info-item');
            infoItems.forEach((item, index) => {
                item.style.opacity = '0';
                item.style.transform = 'translateY(20px)';
                item.style.transition = `opacity 0.5s ease, transform 0.5s ease`;
                item.style.transitionDelay = `${0.2 + index * 0.1}s`;
                
                setTimeout(() => {
                    item.style.opacity = '1';
                    item.style.transform = 'translateY(0)';
                }, 300 + index * 100);
            });
        });
    </script>
</body>
</html>
